<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>新月</title>
    <style>
    p {
        margin: 0;
        padding: 0;
    }
    /* ul {
        padding: 0;
        margin: 0;
        list-style: none;
    } */
    
    body {
        margin: 0;
        padding: 0;
        -moz-user-select: none;//防止文字选中；
    }
    
    div {
        margin: 0;
        padding: 0;
    }
    
    .html {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        min-width: 50em;
        position: absolute;
        min-height: 20em;
    }
    
    .leftsid {
        width: 6%;
        height: 100%;
        opacity: 1;
      min-width: 62px;
      position: absolute;left: 0;
    }
    /*display:inline*/
    
    .ul,
    .headerul {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    .daohang {
        float: left;
        width: 100%;
        height: 25%;
        color: #fff;
        overflow: hidden;
        position: relative;
        box-shadow: 0px 3px 6px #000;
        background-color: rgba(30, 30, 30, 0.9);
        min-width: 62px;
    }
    
    .daohang:hover {
        box-shadow: 5px 3px 9px #000;
    }
    
    .daohang .txt {
        width: 100%;
        text-align: center;
        height: 100%;
        position: absolute;
        top: 50%;
        margin-top: -25px;
        font-size: 1.6em;
        padding-top: 10px;
        color: #ddd;
        text-shadow: 0px 1px -3px white;
    }
    
    .main {
        background-image: url(./img/img0.jpg);
        background-position: center;
        overflow: hidden;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        /*filter: blur(5px);*/
        text-align: center;
        /*为了让火狐浏览器div居中，要设置父元素  text-align: center; */
    }
    .mainleftsid{width: 6%;
        height:2px;
    float: left;
    min-width: 62px;
    }
    .header {
        width:94%;
        height: 50px;
        background-color: rgba(255,255,255,0.5);
        float: left;
       position: relative;
       min-width: 531px;
        /*  -webkit-filter: blur(5px);
       -moz-filter: blur(5px);
       filter:blur(5px); */
    }
    
    .headerul .caidan {
        float: left;
        width: 10%;
        min-width: 105px;
        height: 100%;
        color: #fff;
        position: relative;
        background-color: rgba(250, 250, 250, 0);
        text-align: center;
         display: -moz-box;
        display: -webkit-box;
        -webkit-box-align: center;
         -moz-box-align: center;
    }
      .headerul .caidan:hover{  background-color: rgba(250, 250, 250, 0.3);}
    
    .headerul .caidan .txt {
        width:100%;
        font-size: 1.6em;
        opacity: 0.9;
        color: black;
        text-align: center;
       
    }
    
    .contxt {
        width: 100%;
        height: 200px;
        position: absolute;
        top:39%;
        margin-top: -100px;
        font-family: "宋体";
        font-size: 4.5em;
        text-align: center;
        color: #fff;
    }
    
    .footer {
        width: 100%;
        height: 130px;
        position: absolute;
        bottom: 10%;
        display: -moz-box;
        -moz-box-align: center;
        -moz-box-pack: center;
    }
    
    #id {
        margin: 0;
        padding: 0;
        height: 10px;
        font-family: Arial, Trebuchet MS, Helvetica;
    }
    
    #welcome {
        color: rgba(220, 0, 0, 0.9);
        height: 60px;
        width: 15%;
        margin-right: auto;
        margin-left: auto;
        /*border: solid 5px rgba(220, 0, 0, 0.7);*/
        display: -moz-box;
        display: -webkit-box;
        -webkit-box-align: center;
        -webkit-box-pack: center;
        -moz-box-align: center;
        -moz-box-pack: center;
        outline: rgba(250, 0, 0, 0.7) double 15px;
        font-weight: 700;
    }
    
    #welcome:hover {
        outline: rgba(250, 0, 0, 0.7) double 16px;
        width: 19%;
    }
    </style>
    <script>
    window.onload = function(argument) {
        var ohtml = document.getElementsByTagName('div')[1];
        var odaohangul = document.getElementById('daohangul');
        var adaohang = odaohangul.getElementsByTagName('li');
        var adaohangtxt = odaohangul.getElementsByClassName('txt');
        var owelcome = document.getElementById('welcome');
        var timer = null;
        setInterval(function fontSize(argument) {
            var owidth = owelcome.offsetWidth;
            var ofontsize = owidth / 100 + 0.5;
            owelcome.style.fontSize = ofontsize + "em";
        }, 30)

        for (var i = 0; i < adaohang.length; i++) {
            adaohang[i].num = i;
            adaohang[i].onmouseover = function(argument) {

                adaohangtxt[this.num].style.color = "#fff";
                adaohangtxt[this.num].style.fontSize = "1.9em";
            }
            adaohang[i].onmouseout = function(argument) {

                adaohangtxt[this.num].style.color = "#ddd";
                adaohangtxt[this.num].style.fontSize = "1.6em";
            }
        }

    }
    </script>
</head>
<!--[if lte IE 8]>  <script>alert("请使用最新版IE浏览器、谷歌浏览器或者是火狐浏览器，要不然页面效果很糟糕。")</script>    <![endif]-->

<body onselectstart="return false">
<!-- 防止文字选中 -->
    <div class="alert"></div>
    <div class="html">
        <div class="leftsid" style="z-index: 5">
            <ul class="ul" id="daohangul">
                <li class="daohang">
                    <div class="txt">导航1</div>
                </li>
                <li class="daohang">
                    <div class="txt">导航2</div>
                </li>
                <li class="daohang">
                    <div class="txt">导航3</div>
                </li>
                <li class="daohang">
                    <div class="txt">导航4</div>
                </li>
            </ul>
        </div>
        <div class="main"><div class="mainleftsid" style="display:block;">
                </div>
            <div class="header">
            
                <ul class="headerul">
                    <li class="caidan">
                        <div class="txt">菜单1</div>
                    </li>
                    <li class="caidan">
                        <div class="txt">菜单2</div>
                    </li>
                    <li class="caidan">
                        <div class="txt">菜单3</div>
                    </li>
                    <li class="caidan">
                        <div class="txt">菜单4</div>
                    </li>
                    <li class="caidan">
                        <div class="txt">菜单5</div>
                    </li>
                </ul>
            </div>
            <div class="contxt">欢 迎 访 问
                <p id="txt">bigyi'blog</p>
            </div>
            <div class="footer">
                <div id="welcome">welcome</div>
            </div>
        </div>
    </div>
</body>

</html>
